<template>
    <div class="bigBox">
        <div class="search">
            <el-input v-model="search" placeholder="请输入搜索关键字"></el-input>
            <div class="searchTxt" @click="searchBtn">搜索</div>
            <div class="btn">
                <el-button
                    type="primary"
                    icon="el-icon-circle-plus-outline"
                    @click="addSlideshow"
                >添加</el-button>
            </div>
        </div>
        <div class="main">
            <el-table :data="newList" height="100%" border style="width: 100%">
                <el-table-column
                    prop="_id"
                    label="编号"
                    width="180"
                    header-align="center"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="goods_id"
                    label="商品id"
                    width="180"
                    header-align="center"
                    align="center"
                ></el-table-column>
                <el-table-column prop="image_src" label="图片" header-align="center" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.image_src" alt />
                    </template>
                </el-table-column>
                <el-table-column
                    prop="navigator_url"
                    label="导航地址"
                    header-align="center"
                    align="center"
                ></el-table-column>
                <el-table-column prop="open_type" label="打开方式" header-align="center" align="center"></el-table-column>
                <el-table-column prop="address" label="操作" header-align="center" align="center">
                    <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
                        修改
                    </el-button>-->
                    <template slot-scope="scope">
                        <el-button
                            class="updateBtn"
                            type="primary"
                            size="mini"
                            @click="open(scope.row)"
                        >修改</el-button>

                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="modlDiv" v-if="state" style="height:470px">
                <div class="title">修改</div>
                <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                    <el-form-item label="轮播图id">
                        <el-input v-model="formLabelAlign._id" :value="formLabelAlign._id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="商品id">
                        <el-input v-model="formLabelAlign.goods_id"></el-input>
                    </el-form-item>
                    <el-form-item label="图片路径">
                        <el-upload
                            action="http://web.woniulab.com:8005/admin/fileUpload"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :limit="1"
                            :on-exceed="limitImg"
                            :on-success="updateImg"
                            :headers="wlHeaders"
                            name="imgSrc"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt />
                        </el-dialog>
                    </el-form-item>
                    <div class="btnDiv">
                        <!-- <el-button :plain="true" @click="open2">成功</el-button>
                        <el-button :plain="true" @click="open3">警告</el-button>-->
                        <el-button class="updateBtn" type="primary" size="mini" @click="open2">确认</el-button>

                        <el-button size="mini" type="danger" @click="open3">取消</el-button>
                    </div>
                </el-form>
            </div>

            <!-- 添加轮播图 -->
            <div class="modlDiv" v-if="addState" style="height:550px">
                <div class="title">添加</div>

                <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                    <el-form-item label="商品id">
                        <el-input v-model="addImg.goods_id" :value="formLabelAlign._id"></el-input>
                    </el-form-item>
                    <el-form-item label="跳转路径">
                        <el-input v-model="addImg.navigator_url"></el-input>
                    </el-form-item>

                    <el-form-item label="跳转方式">
                        <el-select v-model="addImg.open_type" placeholder="请选择跳转类型">
                            <el-option  v-for="item in openType" :key="item._id" :value="item.name"></el-option>
                            <!-- <el-option  value="beijing"></el-option> -->
                        </el-select>
                    </el-form-item>

                    <el-form-item label="图片路径">
                        <el-upload
                            action="http://web.woniulab.com:8005/admin/fileUpload"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :limit="1"
                            :on-exceed="limitImg"
                            :on-success="updateImg"
                            :headers="wlHeaders"
                            name="imgSrc"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt />
                        </el-dialog>
                    </el-form-item>
                    <div class="btnDiv">
                        <el-button class="updateBtn" type="primary" size="mini" @click="openAdd1">确认</el-button>

                        <el-button size="mini" type="danger" @click="openAdd2">取消</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions: mapSildeshow } = createNamespacedHelpers("slideshowModules");//获取所有轮播图
const { mapActions: mapgetSearch } = createNamespacedHelpers("slideshowModules");//获取搜索结果
const { mapActions: mapUpdateSwiper } = createNamespacedHelpers("slideshowModules");//获取修改结果
const { mapActions: mapfileUploadSildeShow } = createNamespacedHelpers("slideshowModules");//获取上传结果
const { mapActions: mapdelSildeShow } = createNamespacedHelpers("slideshowModules");//删除上传
const { mapActions: mapaddSwiper } = createNamespacedHelpers("slideshowModules");//添加轮播图完整条件
const { mapActions: mapdeleteImg } = createNamespacedHelpers("slideshowModules");//删除页面显示的轮播图的数据
const { mapActions: mapupORdown } = createNamespacedHelpers("slideshowModules");//轮播图上下架
const { mapState: mapSildeshowList } = createNamespacedHelpers("slideshowModules");
export default {
    data() {
        return {
            search: '',
            state: false,
            addState: false,
            labelPosition: 'right',
            dialogImageUrl: '',
            dialogVisible: false,
            wlHeaders: { 'Authorization': window.localStorage.getItem("token") },
            fileName:"",
            formLabelAlign: {
                _id: '',
                goods_id: "",
                image_src: ""
            },
            addImg: {
                goods_id: '',
                image_src: '',
                navigator_url: '',
                open_type: '',
            },
            openType:[
                {_id:1,name:"navigate"},
                {_id:2,name:"redirect"},
                {_id:3,name:"switchTab"},
                {_id:4,name:"reLaunch"},
                {_id:5,name:"navigateBack"},
                {_id:6,name:"exit"}
            ]
        }
    },

    mounted() {
        console.log("进入轮播图界面");
        this.sildeshow();
        // this.upORdown({_id:"620b42db23fc912797a265aa"})//轮播图上下架
        // this.fileUploadSildeShow();
        // this.delSildeShow();

    },
    destroyed() {
        // console.log("销毁轮播图界面");
    },
    computed: {
        ...mapSildeshowList(["slideshowList"]),
        newList() {
            return this.slideshowList
        }
    },
    methods: {
        ...mapSildeshow(["sildeshow"]),
        ...mapgetSearch(["getSearch"]),
        ...mapUpdateSwiper(["updateSwiper"]),
        ...mapfileUploadSildeShow(["fileUploadSildeShow"]),
        ...mapdelSildeShow(["delSildeShow"]),
        ...mapaddSwiper(["addSwiper"]),
        ...mapdeleteImg(["deleteImg"]),
        ...mapupORdown(["upORdown"]),
        // 搜索
        searchBtn() {
            this.getSearch({ _id: this.search });
        },
        //修改
        open(s) {
            // formLabelAlign: {
            //     _id: '',
            //     goods_id: "",
            //     image_src: ""
            // },
            this.state = true;
            console.log(s);
            this.formLabelAlign._id = s._id
            this.formLabelAlign.goods_id = s.goods_id
        },
        async open2() {
            this.state = false;
            let res = await this.updateSwiper(this.formLabelAlign);
            if (res.msg) {
                this.$message({
                    message: '修改成功！',
                    type: 'success'
                });
            } else {
                this.$message({
                    message: `${res.error}!`,
                    type: 'error'
                });
            }
            console.log(res);
        },
        open3() {
            this.state = false;
            this.$message({
                message: '您已取消修改！',
                type: 'warning'
            });
        },
        //添加
        addSlideshow() {
            console.log("添加轮播图");
            this.addState = true;
        },
        openAdd1() {
            this.addState = false;
            this.$message({
                message: '添加成功！',
                type: 'success'
            });
            console.log(this.addImg)
            this.addSwiper(this.addImg);
        },
        openAdd2() {
            this.addState = false;
            this.$message({
                message: '您已放弃添加！',
                type: 'warning'
            });
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
            console.log("移除轮播图");
            this.delSildeShow({fileName:this.fileName})
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        limitImg() {
            this.$message({
                message: '最大上传一张图片',
                type: 'warning'
            });
        },
        updateImg(response, file, fileList) {
            // console.log(file.url);
            this.addImg.image_src = "http://web.woniulab.com:8005/images/"+response.data;
            this.formLabelAlign.image_src = "http://web.woniulab.com:8005/images/"+response.data;
            this.fileName=response.data;
            // this.ruleForm.imagePath = response.data[0];
            console.log(response);
            // console.log(fileList);
        },
        //暂时无用函数，后面应该也不会用（element-ui身上一起复制过来的）
        handleEdit(s, v) {
            console.log("修改", s, v);
        },
        //删除页面上表格显示出来的轮播图信息
        handleDelete(v){
            console.log(v._id)
            this.deleteImg({_id:v._id})
        }
    },
}
</script>

<style scoped lang="scss">
.bigBox {
    width: 100%;
    height: 93%;
    background-color: white;
    box-sizing: border-box;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    .search {
        width: 495px;
        height: 40px;
        display: flex;
        position: relative;
        // background-color: yellowgreen;
        margin-bottom: 20px;
        .searchTxt {
            height: 100%;
            width: 80px;
            background-color: #158df9;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            border-radius: 0px 5px 5px 0px;
            position: absolute;
            right: 108px;
        }
        .el-input {
            width: 310px;
            height: 100%;
        }
        .btn {
            // margin-left: 10px;
            position: absolute;
            right: 0;
            .el-button--primary {
                background-color: #158df9;
            }
        }
    }
    .main {
        width: 100%;
        height: 90%;
        box-sizing: border-box;
        padding-right: 20px;
        background-color: ghostwhite;
        .el-table {
            img {
                // width: 100%;
                height: 50px;
            }
            .updateBtn {
                background-color: #158df9;
                // width: 56px;
                // height: 28px;
                // color: white;
            }
        }
        .modlDiv {
            width: 600px;
            height: 360px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0px 0px 17px 1px #525151;
            box-sizing: border-box;
            padding: 20px;
            margin: auto auto;
            position: absolute;
            /* 确定元素的移动范围 */
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            .title {
                margin-bottom: 30px;
                margin-left: 15px;
                width: 95%;
                border-bottom: 2px solid #525151;
                // background-color: yellowgreen;
                padding-bottom: 10px;
            }
            .el-input {
                width: 450px;
            }
            .btnDiv {
                width: 100%;
                display: flex;
                justify-content: flex-end;
                box-sizing: border-box;
                padding-right: 30px;
                padding-top: 20px;
                .updateBtn {
                    background-color: #158df9;
                    // width: 56px;
                    // height: 28px;
                    // color: white;
                }
            }
        }
    }
}
</style>